import * as PIXI from 'pixi.js';
import { getParams, savePoint } from "../utils/index";
import { LEVEL_TYPE } from "../enum/index";

// 默认导出记分板构造函数
export default class Scoreboard {
    public container: PIXI.Container;
    // 用户是否缺钱(默认不缺钱)
    public outOfMoney = false;
    private winAmountText: PIXI.Text;
    private moneyText: PIXI.Text;
    // 用户获利金额
    private winAmount: number = 0;
    // 当前用户分数
    private money: number = 100;
    // 游戏赌注
    private bet: number;
    // 获胜得利倍数
    private multiple: number = 1;

    constructor(app: PIXI.Application) {
        // 调用解析当前页路径参数的方法获取参数对象
        const params = getParams()
        // 更新当前用户分数
        this.money = Number(params.point) || 100000
        // 拿到当前房间等级(如果没有,则默认为初级房间)
        const level = params.level || 0
        // 更新游戏赌注(根据房间等级获取对应的赌注)
        this.bet = <number>LEVEL_TYPE[level].step
        // 如果当前用户的分数支付不了当前房间的赌注
        if (this.money < this.bet * this.multiple) {
            // 更新用户的缺钱状态为真
            this.outOfMoney = true;
        }
        // 创建记分板容器
        this.container = new PIXI.Container();
        // 调用生成记分板对象的方法
        this.generate(app.screen.width, app.screen.height);
    }

    // 减分方法
    decrement() {
        // 如果用户当前不是缺钱状态
        if (!this.outOfMoney) {
            // 将总分数减去赌注
            this.money -= this.bet;
            // 调用保存当前分数的方法
            this.saveMoney()
            // 更新'总分数'文本精灵的文本
            this.moneyText.text = `Money: ${this.money}`;
        }
        // 如果总分数减去赌注后小于0
        if (this.money - this.bet < 0) {
            // 更新用户的缺钱状态为真
            this.outOfMoney = true;
        }
    }

    // 加分方法
    increment() {
        // 更新当前用户分数
        this.money += this.bet * this.multiple;
        // 调用保存当前分数的方法
        this.saveMoney()
        // 更新'总分数'文本精灵的文本
        this.moneyText.text = `Money: ${this.money}`;
        // 更新用户获利金额
        this.winAmount += this.bet;
        // 更新'获利金额'文本精灵的文本
        this.winAmountText.text = `Win: ${this.winAmount}`;
        // 更新用户的缺钱状态
        if (this.outOfMoney) this.outOfMoney = false;
        // 返回获胜加分
        return this.bet * this.multiple
    }

    // 保存当前分数的方法
    saveMoney() {
        // 调用保存方法
        savePoint(this.money)
    }

    // 调用生成记分板对象的方法
    private generate(appWidth: number, appHeight: number) {
        // 创建文本样式
        const style = new PIXI.TextStyle({
            fontFamily: 'Arial',
            // fontSize: 24,
            fontSize: 36,
            // fill: '#68dcd5',
            fill: '#fff',
            lineHeight: 36,
            // wordWrap: true, // 开启换行
            // wordWrapWidth: appWidth / 1.5 // 代表换行长度
        });
        // 创建'总分数'的文本精灵
        this.moneyText = new PIXI.Text(`Money: ${this.money}`, style);
        // 设置'总分数'文本精灵的纵坐标
        this.moneyText.y = 25;

        // 创建'赌注'的文本精灵
        const betText = new PIXI.Text(`Bet: ${this.bet}`, style);
        // 设置'赌注'文本精灵的纵坐标('总分数'文本精灵的纵坐标 + 10)
        betText.y = 25;

        // 创建'获利金额'的文本精灵
        this.winAmountText = new PIXI.Text(`Win: ${this.winAmount}`, style);
        this.winAmountText.style = {
            fontFamily: 'Arial',
            fontSize: 36,
            fill: '#68dcd5',
            lineHeight: 36,
        }
        // 设置'获利金额'文本精灵的纵坐标('赌注'文本精灵的纵坐标 + '赌注'文本精灵的高度 + 5)
        this.winAmountText.y = 25;

        // 设置'赌注'、'总分数'、'获利金额'三个文本精灵的横坐标
        this.moneyText.x = appWidth / 40
        betText.x = appWidth / 3
        this.winAmountText.x = appWidth / 2

        // 创建一个图形类容器
        const rect = new PIXI.Graphics();
        // 填充图形类容器的颜色
        rect.beginFill(0x000000, 0.7);
        // 图形类容器的高度( '总分数'文本精灵的高度 + '赌注'文本精灵的高度 + '获利金额'文本精灵的高度)
        const rectHeight = this.moneyText.height + 45;
        // 设置图形类容器的类型为矩形(x、y、宽度、高度)
        rect.drawRoundedRect(0, 0, appWidth / 1.4, rectHeight, 10)
        // 结束绘制
        rect.endFill();

        // 设置记分板容器的横坐标(舞台宽度 - 矩形宽度 - 7)
        this.container.x = appWidth / 20;
        // 设置记分板容器的纵坐标(舞台高度 / 2 + 70)
        this.container.y = appHeight - appHeight / 5;
        // 将矩形、'总分数'文本精灵、'赌注'文本精灵、'获利金额'文本精灵添加到记分板容器中
        this.container.addChild(rect, this.moneyText, betText, this.winAmountText);
    }
}
